<script >
export default {
    name: "Main",

    data(){
        return {
            user: JSON.parse(sessionStorage.getItem("user")),

            tableData:[],
            nameData:null,
            pageSize:11,
            pageNum:1,
            total:0,



        }
    },
    methods:{

        loadPost() {
            this.$axios.post(this.$httpUrl + '/order/userquerylike', {
                "pageSize": this.pageSize,
                "pageNum": this.pageNum,
                "param": {
                    "id":'',
                    "uid":this.user.id,
                    "gid":'',
                    "time":'',
                    "num":''
                }
            }).then(res => res.data).then(res => {
                this.total = res.total;
                this.tableData = res.data.dataList;
                this.nameData =res.data.namemap;
            })
        },


        formatGoodsName(row, column, cellValue, index) {
            return this.nameData[cellValue] || '未知商品';
        },

        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.loadPost();
        },



    },

    beforeMount() {
        this.loadPost();
    }
}
</script>

<template>
    <div>
        <el-row type="flex" class="row-bg" justify="left" style="height: 5vh;padding: 0;margin: 0">
        </el-row>
        <el-table   ref="table"
                    :data="tableData"
                    :header-cell-style="{background:'#f2f5fc',color:'#555555'}"
                    @selection-change="selectChange"
                    style="min-height:78vh;"
                    :row-style="{height: '45px'}"
                    stripe>
            <el-table-column prop="gid" label="物品编号" >
            </el-table-column>
            <el-table-column prop="gid" label="物品名称" :formatter="formatGoodsName" >
            </el-table-column>
            <el-table-column prop="time" label="时间" >
            </el-table-column>
            <el-table-column prop="num" label="购买数量" >
            </el-table-column>
        </el-table>

        <el-pagination
            background
            layout="total,prev, pager, next,jumper"
            style="text-align: center"
            :total=this.total
            @current-change="handleCurrentChange">
        </el-pagination>


    </div>
</template>

<style scoped>
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>